/**
 * page模板
 * 使用时修改 `Temp` 为对应的page名
 */

import Taro, { Config, showModal, showToast, Component } from '@tarojs/taro';
import { View, ScrollView, Image, Text, Navigator } from '@tarojs/components';
import './index.scss';
import NavigationBar from '../../../components/navigationBar/index';
import { getCouponGoodList, purchaseGoodUseCoupon } from '../../../services/goods';
import { fullImgUrl } from '../../../utils/utils';

// 推到state中的类型，所以state中的初始参数用as的方式来指定类型

export default class Index extends Component {
  config = {
    navigationBarTitleText: '选择优惠商品',
  };

  state = {
    rollGoods: [],
    page: 1,
    page_number: 20,
    noMore: false,
    navigationBarHeight: Taro.getStorageSync('navigationBarHeight'),
  };
  componentWillMount() {
    this.getRollGoods(true);
  }

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  onReachBottom() {
    this.getRollGoods();
  }

  getRollGoods = async isRefresh => {
    const { page, page_number, noMore } = this.state;
    let _noMore = noMore;
    let _page = page;
    if (isRefresh) {
      this.setState({
        page: 1,
        noMore: false,
        rollGoods: [],
      });
      _page = 1;
      _noMore = false;
    }
    if (_noMore) {
      // showTips('没有更多数据了');
      return;
    }
    const data = await getCouponGoodList({
      page: _page,
      page_number,
      coupon_no: Taro.getStorageSync('card_no'),
    });

    if (data.has_coupon_type_image.has_coupon_type_goods_image.length < page_number) {
      _noMore = true;
    } else {
      _page++;
    }

    this.setState(prevState => ({
      noMore: _noMore,
      page: _page,
      rollGoods: [
        ...prevState.rollGoods,
        ...data.has_coupon_type_image.has_coupon_type_goods_image,
      ],
    }));
  };

  exchange = item => {
    if (item.has_sku.store_num === 0 || item.has_sku.store_num < 0) {
      Taro.showToast({
        title: '库存不足',
        icon: 'none',
      });
    } else {
      purchaseGoodUseCoupon({
        sku_id: item.has_sku.sku_id,
        card_no: Taro.getStorageSync('card_no'),
        exchange_no: this.$router.params.code,
      }).then(res => {
        Taro.navigateTo({
          url: `/subPackageWork/pages/settlement/index?couponcode=${item.coupon_no}&couponexchange=${this.$router.params.code}`,
        });
      });
    }
  };

  render() {
    const { rollGoods } = this.state;
    return (
      <View className='roll-shop-list' style={`margin-top: ${navigationBarHeight}`}>
        <NavigationBar text='选择优惠商品' />
        <ScrollView className='scroll'>
          {/* <UserRollItem list={RollGoods} type="1"  /> */}
          <View className='shop-list'>
            {rollGoods.map(item => {
              return (
                <View className='shop-item' key={item.goods_id} onClick={() => this.exchange(item)}>
                  <View className='shop-item-wrapper'>
                    <Image
                      src={fullImgUrl(item.has_sku.cover?item.has_sku.cover:item.has_sku.has_goods.cover)}
                      className='item-img'
                      mode='aspectFill'
                    />
                    <View className='item-info'>
                      <View className='item-title'>{item.has_sku.has_goods.goods_name}</View>
                      <View className='item-str'>规格：{item.has_sku.attr_str}</View>
                      <View className='item-price-wrapper'>
                        <View className='item-primary-price'>
                          ￥
                          {(Number(item.has_sku.price) - Number(item.discount_amount)).toFixed(2) <
                          0
                            ? 0
                            : (Number(item.has_sku.price) - Number(item.discount_amount)).toFixed(
                                2
                              )}
                        </View>
                        <View className='item-now-price'>￥{item.has_sku.price}</View>
                        <View className='item-discount'>已优惠{item.discount_amount}</View>
                      </View>
                    </View>
                  </View>

                  {item.type === 1 ? (
                    <View className='tips'>
                      <View className='tips-block'>
                        我们将为您配送卡券，可用于随时兑换中鹿岛大黄鱼。
                      </View>
                    </View>
                  ) : (
                    <View className='tips'>
                      <View className='tips-block'>
                        我们将为您配送鲜鱼，现捕现捞，并根据您选择的发货时间直送到家。
                      </View>
                    </View>
                  )}
                </View>
              );
            })}
          </View>
          <View className='bottom-tips'>温馨提示：您可以根据需求，下单不同形式的商品哦。</View>
        </ScrollView>
      </View>
    );
  }
}
